﻿.fui-Skeleton {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;

    &:not(.fui-Skeleton-pulse) {
        .fui-SkeletonItem {
            background-color: var(--colorNeutralStencil1);
        }
    }

    .fui-SkeletonItem {
        position: relative;
        height: 16px;
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
    }

    &-wave {
        .fui-SkeletonItem {
            &::after {
                transform: translate(-100%);
                background-image: linear-gradient(to right, var(--colorNeutralStencil1) 0%, var(--colorNeutralStencil2) 50%, var(--colorNeutralStencil1) 100%);
                animation-name: skeleton-wave-anim;
                animation-timing-function: ease-in-out;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                position: absolute;
                display: block;
                content: "";
                inset: 0px;
            }
        }
    }

    &-pulse {
        .fui-SkeletonItem {
            &::after {
                background-color: var(--colorNeutralStencil1);
                animation-duration: 1s;
                animation-name: skeleton-pulse-anim;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                position: absolute;
                display: block;
                content: "";
                inset: 0px;
            }
        }
    }
}

@keyframes skeleton-wave-anim {
    100% {
        transform: translate(100%);
    }
}

@keyframes skeleton-pulse-anim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}
